<template>
    <div>
        <el-card class="user-info">
            <template #header>
                <div class="card-header">
                    <h3>收费标准</h3>
                </div>
            </template>
            <div>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-image :src="order_detail.stationPicture" />
                        <div class="flex-column mt10">
                            <div class="high-light">{{order_detail.stationName}}</div>
                            <div>
                                <span class="label">充电桩：</span>
                                <span class="high-light">{{order_detail.pileName}}<br>({{order_detail.pileCode}})-P{{order_detail.port}}</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="18" v-if="order_detail.feeRule">
                      <div class="label" style="line-height: 40px;">设备当前收费标准：</div>
                      <el-table
                      v-if="order_detail.feeRule.type == 1"
                      :key="order_detail.feeRule.type"
                      :data="order_detail.feeRule.times" style="width: 100%">
                          <el-table-column prop="time" label="价格" align="center">
                              <template slot-scope="{row}">
                                  <span>{{ row.price || 0 }}元</span>
                              </template>
                          </el-table-column>
                          <el-table-column prop="time" label="时间" align="center">
                              <template slot-scope="{row}">
                                  <span>{{ row.time }}小时</span>
                              </template>
                          </el-table-column>
                      </el-table>
                      <el-table
                      v-if="order_detail.feeRule.type == 2"
                      :key="order_detail.feeRule.type"
                      :data="order_detail.feeRule.powers" style="width: 100%">
                          <el-table-column prop="minPower" label="最小功率" align="center"></el-table-column>
                          <el-table-column prop="maxPower" label="最大功率" align="center" />
                          <el-table-column prop="price" label="价格" align="center">
                              <template slot-scope="{row}">
                                  <span>{{ row.price || 0 }}元</span>
                              </template>
                          </el-table-column>
                          <el-table-column prop="price" label="时间" align="center">
                              <template slot-scope="{row}">
                                  <span>{{ row.time || '' }}小时</span>
                              </template>
                          </el-table-column>
                      </el-table>
                      <el-table
                      v-if="order_detail.feeRule.type == 3"
                      :key="order_detail.feeRule.type"
                      :data="order_detail.feeRule.electrics" style="width: 100%">
                        <el-table-column prop="electricityPrice" label="电费" align="center" />
                        <el-table-column prop="servicePrice" label="服务费" align="center" />
                        <el-table-column prop="startTime" label="开始时间" align="center">
                            <template slot-scope="{row}">
                                <span>{{ row.startTime }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="endTime" label="结束时间" align="center">
                            <template slot-scope="{row}">
                                <span>{{ row.endTime }}</span>
                            </template>
                        </el-table-column>

                      </el-table>
                      <div v-if="order_detail.feeRule.type == 4 && order_detail.feeRule">
                        <el-table
                        :key="order_detail.feeRule.type"
                        :data="order_detail.feeRule.stateGridElectrics" style="width: 100%">
                            <el-table-column prop="startTime" label="时段" align="center">
                                <template slot-scope="{row}">
                                    <span>{{ row.startTime + '-' + row.endTime }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="type" label="类型" align="center">
                                <template slot-scope="{row}">
                                    <span>{{ gettypeName(row.type) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="electricityPrice" label="电费" align="center" />
                            <el-table-column prop="servicePrice" label="服务费" align="center" />
                            <el-table-column prop="totalPrice" label="总金额" align="center" />
                        </el-table>
                      </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script >
  export default {
    name: 'Charges',
    components: {  },
    props: {
      order_detail: {
        type: Object,
        default: {priceList:[]}
      },
    },
    data() {
      return {

      };
    },
    mounted(){

    },
    methods: {
        gettypeName(type){
            let title = ''
            switch (type) {
                case 0:
                    title = '尖'
                    break;
                case 1:
                    title = '峰'
                    break;
                case 2:
                    title = '平'
                    break;
                case 3:
                    title = '谷'
                    break;
            }
            return title
        },
    }
  }
</script>

<style lang="scss" scoped>
    .label {
        color: #8087a0;
    }
    .high-light {
        font-size: 14px;
        color: #5278e2;
        font-weight: 600;
    }
</style>
